<template>
  <div class="hh">
    <!-- 二级坑位 -->
    <div>
      <!--keep-alive可以让这个里面的东西缓存 第一种写法:
          exclude 不让这个组件缓存了  include 让这些组件有缓存
        里面写的组件的名字
      <keep-alive :exclude="['HomeCom1']" :include="['CollectCom','LoveCom','MyCom']">
      <keep-alive exclude="HomeCom1" include="CollectCom,LoveCom,MyCom">
        <router-view></router-view>
      </keep-alive>
       -->

      <!-- 第二种写法:
        在当前组件定义一个布尔值
         meta:{
        keepAlive:true
      },
      -->
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
    <!-- <ul>
      <li>
        <router-link to="/home">面精</router-link>
      </li>
      <li><router-link to="/collect">收藏</router-link></li>
      <li><router-link to="/love">喜欢</router-link></li>
      <li><router-link to="/my">我的</router-link></li>
    </ul> -->
    <!-- //二级路由路径不写  /  写法 -->
    <ul>
      <li>
        <router-link to="/homecom/home">面精</router-link>
      </li>
      <li><router-link to="/homecom/collect">收藏</router-link></li>
      <li><router-link to="/homecom/love">喜欢</router-link></li>
      <li><router-link to="/homecom/my">我的</router-link></li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HomeCom',
  data () {
    return {

    }
  },
  created () {
  },
  computed: {
  },
  methods: {
  }
}
</script>
<style lang='less'  scoped>
.hh {
  height: 100vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  div {
    flex: 1;
    overflow: auto;
  }
  ul {
    display: flex;
    list-style: none;
    height: 80px;
    width: 100%;
    // justify-content: space-between;
    background-color: skyblue;
    li {
      // text-align: center;

      flex: 1;
      a {
        display: block;
        width: 100%;
        height: 80px;
        text-align: center;
        line-height: 80px;
        text-decoration: none;
        color: hotpink;
        font-size: 18px;
        font-weight: 500;
      }
    }
  }
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.router-link-exact-active {
  background-color: yellow;
}
</style>
